<template>
	<view class="mains">
		<!-- 头部 -->
		<view class="head">
			<view class="headin">
				<text>基金频道</text>
				<text class="head-bing" @tap="backPage"> {{left}} </text>
				<image src="../../../static/wealth/j-top.png" mode="" class="head-ding"></image>
				<image src="../../../static/index/hs.png" mode="" class="po-img"></image>
				<input type="text" value="" class="ipt" placeholder="搜索相关信息" placeholder-style=" color: grey" />
			</view>
		</view>
		<view class="head-tc"></view>
		<!-- 菜单 -->
		<view class="main">
			<view class="main-img-text" @tap="goFundRanking">
				<image src="../../../static/wealth/j-jj.png" mode=""></image>
				<text>基金排行</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-rq.png" mode=""></image>
				<text>人气热销</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-tg.png" mode=""></image>
				<text>投顾组合</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-xf.png" mode=""></image>
				<text>新发基金</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-gs.png" mode=""></image>
				<text>固守+</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-tz.png" mode=""></image>
				<text>投资风向</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-hb.png" mode=""></image>
				<text>货币基金</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-zs.png" mode=""></image>
				<text>指数基金</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-zt.png" mode=""></image>
				<text>主体投资</text>
			</view>
			<view class="main-img-text">
				<image src="../../../static/wealth/j-mb.png" mode=""></image>
				<text>目标盈</text>
			</view>
		</view>
		<view class="main1"></view>
		<view class="bg">
			<image src="../../../static/wealth/j-bg.png" mode=""></image>
		</view>
		<!-- 稳健优选 -->
		<view class="TrumpCard-list">
			<view class="TrumpCard-list-title">
				<text>稳健优选</text>
				<text class="TrumpCard-list-title1">
					适合新手投资 稳中求进
				</text>
			</view>

			<view class="TrumpCard-list-four-texts">
				<text v-for="item in TrumpCardArr" :key="item.id" :class="{ fourActive:item.id==TrumpCardActive}"
					@tap="nowName(item.id)">{{item.name}}</text>
			</view>
			<swiper class="TrumpCard-list-louceng" circular="true" :current="TrumpCardActive" @change="TrumpCardSwiper">
				<swiper-item>
					<scroll-view scroll-y="true" class="TrumpCard-list-louceng-main">
						<view class="TrumpCard-list-louceng-main-one"  @tap="topage(1)">
							<view class="TrumpCard-list-louceng-main-one-left">
								<image src="../../../static/wealth/j-min.png" mode=""></image>
								<view class="TrumpCard-list-louceng-main-one-left-t">
									<text class="weng-red">11.76</text>
									<text class="weng-red1">%</text>
									<text class="weng-r3">近一年</text>
								</view>
							</view>
							<view class="TrumpCard-list-louceng-main-one-right">
								<text class="TrumpCard-list-louceng-main-one-right-t1">
									股债双利 理财升级
								</text>
								<text class="TrumpCard-list-louceng-main-one-right-t2">
									汇添富双利券A
								</text>
							</view>
						</view>
						<view class="TrumpCard-list-louceng-main-one" @tap="topage(1)">
							<view class="TrumpCard-list-louceng-main-one-left">
								<image src="../../../static/wealth/j-min.png" mode=""></image>
								<view class="TrumpCard-list-louceng-main-one-left-t">
									<text class="weng-red">18.97</text>
									<text class="weng-red1">%</text>
									<text class="weng-r3">近一年</text>
								</view>
							</view>
							<view class="TrumpCard-list-louceng-main-one-right">
								<text class="TrumpCard-list-louceng-main-one-right-t1">
									攻守有道
								</text>
								<text class="TrumpCard-list-louceng-main-one-right-t2">
									中银多策略灵活配置混合A
								</text>
							</view>
						</view>
						<view class="TrumpCard-list-louceng-main-one"  @tap="topage(1)">
							<view class="TrumpCard-list-louceng-main-one-left">
								<image src="../../../static/wealth/j-min.png" mode=""></image>
								<view class="TrumpCard-list-louceng-main-one-left-t">
									<text class="weng-red">8.74</text>
									<text class="weng-red1">%</text>
									<text class="weng-r3">近一年</text>
								</view>
							</view>
							<view class="TrumpCard-list-louceng-main-one-right">
								<text class="TrumpCard-list-louceng-main-one-right-t1">
									理财新手首选
								</text>
								<text class="TrumpCard-list-louceng-main-one-right-t2">
									广发趋势优选灵活配置混合A
								</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<text>第2页</text>
				</swiper-item>
				<swiper-item>
					<text>第3页</text>
				</swiper-item>
			</swiper>
		</view>
		<!-- 收益进取 -->
		<view class="sy-list">
			<view class="sy-list-title">
				<text>收益进取</text>
				<text class="sy-list-title1">
					收益进阶,历史业绩亮眼
				</text>
			</view>

			<view class="sy-list-four-texts">
				<text v-for="item in syArr" :key="item.id" :class="{ threeActive:item.id==syActive}"
					@tap="nowsyName(item.id)" class="sy-list-four-text ">{{item.name}}</text>
			</view>
			<swiper class="sy-list-louceng" circular="true" :current="syActive" @change="sySwiper">
				<swiper-item>
					<scroll-view scroll-y="true"  class="sy-list-louceng-main">
						<view class="sy-list-louceng-main-one">
							<view class="sy-list-louceng-main-one-left">
								<image src="../../../static/wealth/j-big.png" mode=""></image>
							</view>
							<view class="sy-list-louceng-main-one-right">
								<view class="sy-list-louceng-main-one-right-t1">
									<text>投研副总挂帅</text>
									<text class="sy-list-louceng-main-one-right-t1-grey">|</text>
									<text>聚焦新能源</text>
								</view>
								<view class="sy-list-louceng-main-one-right-t2">
									<text>中欧新进制造股票C</text>
								</view>
								<view class="sy-list-louceng-main-one-right-t3">
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text>95.46</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">近一年</text>
									</view>
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text class="hei">167.72</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai hei">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">近三年</text>
									</view>
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text class="hei">154.87</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai hei">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">成立以来</text>
									</view>
								</view>
							</view>
						</view>
						<view class="sy-list-louceng-main-one">
							<view class="sy-list-louceng-main-one-left">
								<image src="../../../static/wealth/j-big.png" mode=""></image>
							</view>
							<view class="sy-list-louceng-main-one-right">
								<view class="sy-list-louceng-main-one-right-t1">
									<text>消费</text>
									<text class="sy-list-louceng-main-one-right-t1-grey">|</text>
									<text>四获金牛肖楠</text>
								</view>
								<view class="sy-list-louceng-main-one-right-t2">
									<text>易方达消费行业股票C</text>
								</view>
								<view class="sy-list-louceng-main-one-right-t3">
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text>80.36</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">近一年</text>
									</view>
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text class="hei">119.29</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai hei">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">近三年</text>
									</view>
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text class="hei">416.20</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai hei">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">成立以来</text>
									</view>
								</view>
							</view>
						</view>
						<view class="sy-list-louceng-main-one">
							<view class="sy-list-louceng-main-one-left">
								<image src="../../../static/wealth/j-big.png" mode=""></image>
							</view>
							<view class="sy-list-louceng-main-one-right">
								<view class="sy-list-louceng-main-one-right-t1">
									<text>2020翻倍基</text>
									<text class="sy-list-louceng-main-one-right-t1-grey">|</text>
									<text>掘金港股洼地</text>
								</view>
								<view class="sy-list-louceng-main-one-right-t2">
									<text>南方香港成长灵活配置混合C</text>
								</view>
								<view class="sy-list-louceng-main-one-right-t3">
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text>107.78</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">近一年</text>
									</view>
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text class="hei">142.45</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai hei">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">近三年</text>
									</view>
									<view class="sy-list-louceng-main-one-right-t3-red">
										<text class="hei">161.60</text>
										<text class="sy-list-louceng-main-one-right-t3-redbai hei">%</text>
										<text class="sy-list-louceng-main-one-right-t3-red1">成立以来</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<text>第2页</text>
				</swiper-item>
				<swiper-item>
					<text>第3页</text>
				</swiper-item>
			</swiper>
		</view>
		<!-- 新发基金 -->
		<view class="newJJ">
			<view class="newJJ-list-title">
				<text>新发基金</text>
			</view>
			<view class="swiperboxs">
				<swiper class="swiper" next-margin="120rpx" snap-to-edge='true'>
					<swiper-item>
						<view class="swiperbox">
							<view class="swiperbox-t1">
								<text>华夏科创 50ETF</text>
							</view>
							<view class="swiperbox-t2">
								<text class="swiperbox-t2-blue">首批科创链接</text>
								<text class="swiperbox-t2-huang">指数投资专家</text>
							</view>
							<view class="swiperbox-img-text">
								<view class="swiperbox-img">
									<image src="../../../static/wealth/j-nan.png" mode=""></image>
									<text>小哥哥</text>
								</view>
								<text class="swiperbox-text">认证截止日 2021-4-6</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiperbox">
							<view class="swiperbox-t1">
								<text>华夏科创 50ETF</text>
							</view>
							<view class="swiperbox-t2">
								<text class="swiperbox-t2-blue">首批科创链接</text>
								<text class="swiperbox-t2-huang">指数投资专家</text>
							</view>
							<view class="swiperbox-img-text">
								<view class="swiperbox-img">
									<image src="../../../static/wealth/j-nv.png" mode=""></image>
									<text>小姐姐</text>
								</view>
								<text class="swiperbox-text">认证截止日 2021-4-6</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 资讯要闻 -->
		<view class="caifu-first">
			<text class="caifu-first-title">资讯要闻</text>
			<view class="caifu-first-ing">
				<view class="caifu-first-ing-left">
					<text class="caifu-first-ing-left-black">来了来了! 科创50ETF链接基金重磅新发</text>
					<text class="caifu-first-ing-left-grey">祥瑞金融资讯 1833浏览</text>
				</view>
				<image src="../../../static/wealth/j-one.png" mode="" class="caifu-first-ing-right"></image>
			</view>
			<view class="caifu-first-ing">
				<view class="caifu-first-ing-left">
					<text class="caifu-first-ing-left-black">来了来了! 科创50ETF链接基金重磅新发</text>
					<text class="caifu-first-ing-left-grey">祥瑞金融资讯 1833浏览</text>
				</view>
				<image src="../../../static/wealth/j-two.png" mode="" class="caifu-first-ing-right"></image>
			</view>
			<view class="caifu-first-ing">
				<view class="caifu-first-ing-left">
					<text class="caifu-first-ing-left-black">来了来了! 科创50ETF链接基金重磅新发</text>
					<text class="caifu-first-ing-left-grey">祥瑞金融资讯 1833浏览</text>
				</view>
				<image src="../../../static/wealth/j-three.png" mode="" class="caifu-first-ing-right"></image>
			</view>
		</view>
		
		<!-- 触底 -->
		<view class="chudi">
			<text>加载更多...</text>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				left:'<',
				TrumpCardArr: [{
					id: 0,
					name: '稳中进取'
				}, {
					id: 1,
					name: '安稳增值'
				}, {
					id: 2,
					name: '活期理财'
				}],
				TrumpCardActive: 0,
				syArr: [{
					id: 0,
					name: '绩优股基'
				}, {
					id: 1,
					name: '精选指数'
				}, {
					id: 2,
					name: '布局海外'
				}],
				syActive: 0
			}
		},
		onLoad() {
		this.getData();
		},
		methods: {
			async getData(){
				const res =await this.$request({
					url:'/fund/hot',
					method:'get',
				})
				console.log(res);
				
			},
			nowName(id) {
				this.TrumpCardActive = id;
			},
			TrumpCardSwiper(e) {
				this.TrumpCardActive = e.detail.current;
			},
			topage(id){
				uni.navigateTo({
					url:"./details/details?id="+id
				})
				},
			nowsyName(id) {
				this.syActive = id;
			},
			sySwiper(e) {
				this.syActive = e.detail.current;
			},
			goFundRanking(){
				uni.navigateTo({
					url:'./FundRanking/FundRanking'
				}) 
			},
			backPage(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mains {
		display: flex;
		flex-wrap: wrap;
		
		//触底
		.chudi {
			height: 60rpx;
			width: 100%;
			text-align: center;
		
			text {
				color: #999;
				font-size: 24rpx;
			}
		}
		
		//资讯要闻
		.caifu-first {
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 10rpx 0rpx;
			margin: 0 auto;
		
			.caifu-first-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}
			.caifu-first-title::after {
				content: '';
				background-image: url(../../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 0rpx;
				right: 0rpx;
			}
		
			.caifu-first-ing {
				display: flex;
				justify-content: space-between;
				border: 4rpx solid #fafafa;
				border-radius: 20rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				position: relative;
				margin-top: 20rpx;
		
				.caifu-first-ing-left {
					display: flex;
					width: 355rpx;
					flex-wrap: wrap;
					.caifu-first-ing-left-black{
						font-size: 28rpx;
						color: #333;
						font-weight: 800;
						line-height: 44rpx;
						
					}
					.caifu-first-ing-left-grey{
						font-size: 24rpx;
						color: #999;
					}
				}
		
				.caifu-first-ing-right {
					width: 208rpx;
					height: 154rpx;
				}
			}
		}
		
		//  头部
		.head {
			position: fixed;
			top: -1rpx;
			z-index: 1;
			width: 100%;
			display: flex;
			background-color: #3476f1;
			padding-bottom: 20rpx;
			color: #FFFFFF;
			font-weight: 600;
			font-size: 35rpx;
			box-sizing: border-box;
			.headin{
				flex-wrap: wrap;
				width: 100%;
				justify-content: space-around;
				margin-top: 120rpx;
				display: flex;
				position: relative;
				.ipt {
					color: #000;
					font-weight: 400;
					box-sizing: border-box;
					padding-left: 40%;
					width: 94%;
					height: 60rpx;
					font-size: 24rpx;
					border-radius: 30rpx;
					background-color: #fff;
					margin-bottom: 20rpx;
				}
				
				.head-ding {
					position: absolute;
					right: 20rpx;
					top: 0;
					z-index: 99;
				}
				.head-bing{
					position: absolute;
					z-index: 99;
					width: 40rpx;
					height: 40rpx;
					top: 8rpx;
					left: 40rpx;
					line-height: 40rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx;
				}
				
				text {
					display: block;
					width: 100%;
					text-align: center;
					margin-bottom: 40rpx;
				}
				
				.po-img {
					position: absolute;
					left: 37%;
					top: 98rpx;
					width: 34rpx;
					height: 34rpx;
				}
			}
			
		}

		.head-tc {
			height: 470rpx;
			width: 100%;
			background-color: #3476f1;
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
		}

		//菜单
		.main {
			position: absolute;
			top: 310rpx;
			margin: auto;
			left: 0;
			right: 0;
			background-color: #fff;
			width: 94%;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			justify-content: space-between;
			border: 4rpx solid #fafafa;

			.main-img-text {
				width: 88rpx;
				height: 130rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: space-around;
				margin: 0 20rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					font-size: 20rpx;
					color: #666;
				}
			}
		}

		.main1 {
			width: 100%;
			height: 200rpx;
		}

		.bg {
			height: 200rpx;
			width: 702rpx;
			margin: 0 auto;

			image {
				height: 200rpx;
				width: 702rpx;
			}
		}

		//稳健优选
		.TrumpCard-list {
			box-sizing: border-box;
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 0rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 50rpx;

			.TrumpCard-list-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.TrumpCard-list-title1 {
					font-size: 20rpx;
					color: #999;
					padding-left: 10rpx;
					margin-left: 10rpx;
					font-weight: 400;
					border-left: 2rpx solid #999;
				}
			}

			.TrumpCard-list-title::after {
				content: '';
				background-image: url(../../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 0rpx;
				right: 0rpx;
			}

			.TrumpCard-list-four-texts {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				height: 48rpx;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;

				text {
					margin-right: 60rpx;
				}

				.fourActive {
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 600;
					display: inline-block;
					background-color: #4590ef;
					width: 144rpx;
					height: 48rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 48rpx;
				}
			}

			.TrumpCard-list-louceng {
				width: 704rpx;
				height: 30vh;
				border-radius: 10rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.TrumpCard-list-louceng-main {
					border: 4rpx solid #fafafa;
					border-radius: 20rpx;
					height: 30vh;
					display: flex;
					flex-wrap: wrap;

					.TrumpCard-list-louceng-main-one {
						box-sizing: border-box;
						padding: 30rpx;
						display: flex;
						justify-content: space-between;
						border-top: 4rpx solid #fafafa;

						.TrumpCard-list-louceng-main-one-left {
							display: flex;
							width: 206rpx;
							margin-right: 80rpx;

							image {
								width: 70rpx;
								height: 70rpx;
								margin-right: 20rpx;
							}

							.TrumpCard-list-louceng-main-one-left-t {
								.weng-red {
									font-size: 36rpx;
									color: #f85656;
									font-weight: bold;
								}

								.weng-red1 {
									font-size: 24rpx;
									color: #f85656;
									font-weight: bold;
								}

								.weng-r3 {
									font-size: 24rpx;
									color: #333;
									display: block;
								}
							}

						}

						.TrumpCard-list-louceng-main-one-right {
							display: flex;
							flex-wrap: wrap;
							justify-content: flex-start;

							.TrumpCard-list-louceng-main-one-right-t1 {
								font-size: 28rpx;
								color: #333;
								display: block;
							}

							.TrumpCard-list-louceng-main-one-right-t2 {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
			}
		}

		//收益进取
		.sy-list {
			box-sizing: border-box;
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 0rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 50rpx;

			.sy-list-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.sy-list-title1 {
					font-size: 20rpx;
					color: #999;
					padding-left: 10rpx;
					margin-left: 10rpx;
					font-weight: 400;
					border-left: 2rpx solid #999;
				}
			}

			.sy-list-title::after {
				content: '';
				background-image: url(../../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 0rpx;
				right: 0rpx;
			}

			.sy-list-four-texts {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				height: 48rpx;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;

				.sy-list-four-text {
					margin-right: 60rpx;
				}

				.threeActive {
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 600;
					display: inline-block;
					background-color: #4590ef;
					width: 144rpx;
					height: 48rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 48rpx;
				}
			}

			.sy-list-louceng {
				width: 704rpx;
				height: 45vh;
				border-radius: 10rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.sy-list-louceng-main {
					border: 4rpx solid #fafafa;
					height: 45vh;
					border-radius: 20rpx;
					display: flex;
					flex-wrap: wrap;

					.sy-list-louceng-main-one {
						box-sizing: border-box;
						padding: 30rpx;
						display: flex;
						justify-content: space-between;
						border-top: 4rpx solid #fafafa;

						.sy-list-louceng-main-one-left {
							display: flex;
							width: 150rpx;

							image {
								width: 98rpx;
								height: 142rpx;
								margin-right: 20rpx;
							}

						}

						.sy-list-louceng-main-one-right {
							display: flex;
							flex-wrap: wrap;

							.sy-list-louceng-main-one-right-t1 {
								font-size: 28rpx;
								color: #333;
								font-weight: 800;

								.sy-list-louceng-main-one-right-t1-grey {
									color: #999;
									font-weight: 400;
									padding: 0 10rpx;
								}
							}

							.sy-list-louceng-main-one-right-t2 {
								font-size: 24rpx;
								color: #999;
								width: 100%;
								margin-top: 14rpx;
							}

							.sy-list-louceng-main-one-right-t3 {
								display: flex;
								justify-content: space-between;

								.sy-list-louceng-main-one-right-t3-red {
									margin-top: 30rpx;
									width: 160rpx;
									display: flex;
									flex-wrap: wrap;
									font-size: 36rpx;
									color: #f85656;
									font-weight: 800;

									.hei {
										color: #333;
									}

									.sy-list-louceng-main-one-right-t3-red1 {
										font-size: 28rpx;
										color: #999;
									}

									.sy-list-louceng-main-one-right-t3-redbai {
										font-size: 28rpx;
										padding-top: 7rpx;
									}
								}
							}
						}
					}
				}
			}
		}

		// 新发基金
		.newJJ {
			height: 340rpx;
			box-sizing: border-box;
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 0rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 30rpx;

			.newJJ-list-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.newJJ-list-title::after {
				content: '';
				background-image: url(../../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 0rpx;
				right: 0rpx;
			}

			.swiperboxs {
				width: 700rpx;
				margin: 0 auto;

				.swiperbox {
					width: 516rpx;
					height: 228rpx;
					border: 4rpx solid #fafafa;
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					border-radius: 20rpx;
					flex-wrap: wrap;

					.swiperbox-t1 {
						width: 100%;
						font-size: 28rpx;
						font-weight: 800;
						color: #333;
					}

					.swiperbox-t2 {
						width: 100%;

						text {
							font-size: 20rpx;
							padding: 5rpx;
						}

						.swiperbox-t2-blue {
							margin-right: 10rpx;
							color: #3476F1;
							background-color: #eaf1fe;
						}

						.swiperbox-t2-huang {
							color: #ce9e56;
							background-color: #fcf5ec;
						}
					}

					.swiperbox-img-text {
						display: flex;
						width: 100%;
						justify-content: space-between;
						align-items: center;

						.swiperbox-img {
							display: flex;
							align-items: center;

							image {
								width: 54rpx;
								height: 54rpx;
							}

							text {
								margin-left: 10rpx;
								font-size: 28rpx;
								color: #333;
							}
						}

						.swiperbox-text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				.swiperbox::after{
					content: "正在售卖";
					width: 94rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					background-image: url(../../../static/funds/j-red.png);
					background-size: cover;
					font-size: 16rpx;
					color: #FFFFFF;
					position: absolute;
					top:0rpx;
					right: 66rpx;
				}
			}
		}
	}
	/* 隐藏 scroll-view 滚动条*/
	scroll-view ::-webkit-scrollbar {
	 width: 0;
	 height: 0;
	 background-color: transparent;
	}
</style>
